<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
.box{
	position: fixed;
	top: 0;
	left:50%;
	transform: translate(-50%,-50%);
	width: 200px;
	height:200px;
	background: #ccc;
	text-align:center;
	line-height:40px;
	transition: top .5s linear;
}
.title{
	height: 40px;
	background: blue;
}
.remover{
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 40px;
	text-align:center;
	line-height:40px;
	color:#fff;
}
</style>
<body>
	<!-- <div class="box">
		<div class="title">数字</div>
		<div class="content">
			111
		</div>
	</div> -->
</body>
<script type="">
  class Box{
  	constructor(){
		this.button=document.createElement('input');
		this.button.type='button';
		this.button.value='弹出';
  		this.button.onclick=this.block;
		document.body.appendChild(this.button);
  	}

  	block(){
  		new addBox();
  	}
  }

  class addBox{
  		constructor(){
  			//创建添加元素
	  		this.alertbox=document.createElement('div');
	  		this.alertbox.classList.add('box');
	  		this.title=document.createElement('div');
	  		this.title.classList.add('title');
	  		this.title.innerHTML='数字';
	  		this.content=document.createElement('div');
	  		this.content.innerHTML='11111';
	  		this.remover=document.createElement('a');
	  		this.remover.classList.add('remover');
	  		this.remover.innerHTML='X';
			document.body.appendChild(this.alertbox);
			this.alertbox.appendChild(this.title);
			this.alertbox.appendChild(this.content);
			this.alertbox.appendChild(this.remover);
			console.log(this.alertbox)
			this.alertbox.style.top='50%';//给了运动样式 为啥没运动效果
			
			// var num=0;
			// var timer=setInterval(()=>{
			// 	num++;	
			// 	this.alertbox.style.top=num+'%';
			// 	if(num>=50){
			// 		clearInterval(timer);
			// 	}

			// },10);

			//事件	
	  		this.remover.onclick=this.delete;//删除
	  		this.alertbox.onmousedown=this.move;
			
  		}
  		delete(){
	  		this.parentNode.style.display='none';
	  	}
	  	move(ev){
	  		var obj=this;
	  		var oEvent=ev||event;
			var x=oEvent.clientX;
			var y=oEvent.clientY;

			//console.log(x+'|'+y)
			var disX=x-this.offsetLeft;
			var disY=y-this.offsetTop;
	  		document.onmousemove=function(ev){
				var oEvent=ev||event;

				var l=oEvent.clientX-disX;
				var t=oEvent.clientY-disY;
				//console.log(l+'|'+t)
				obj.style.left=l+'px';
				obj.style.top=t+'px';
	  		};
	  		document.onmouseup=function(){
	  			//console.log(1)
				document.onmousemove=null;
				document.onmouseup=null;
			};
			return false;
	  	}
  }
 new Box();
</script>
</html>